<template>
  <div class="jumbotron bg">
    <h1>Search Github Users</h1>
    <p>
      <input type="text" placeholder="输入你想要搜索的用户名" v-model="keywords">
      <a class="btn btn-default btn-lg" href="#" role="button" @click="searchUsers">Search</a>
    </p>
  </div>
</template>

<script>
import axios from "axios";
    export default {
        name: "Search",
      data(){
          return{
            keywords:"",
          }
      },
      methods:{
        searchUsers(){
          if(this.keywords&&this.keywords.trim()=="") return alert("用户输入的内容不得为空")
          else{
            this.$bus.$emit("updateListData",{isFirst:false,isLoading:true,emsg:"",users:[]})
            this.$http.get(`https://api.github.com/search/users?q=${this.keywords}`).then(
                response=>{
                  // console.log(response.data.items)
                  console.log("请求成功了~")
                  this.$bus.$emit('updateListData',{isLoading:false,emsg:"",users:response.data.items})
                },
                error=>{
                  console.log(error.msg)
                  this.$bus.$emit("updateListData",{isLoading:false,emsg:error.message,users:[]})
                }
            )
          }


        }
      }
    }
</script>

<style scoped lang="less">
.bg{
  height: 250px;
  margin: 0 20px;
  padding-left: 50px;
  padding-top: 50px;
  .title{
    font-size: 20px;
  }
  input{
    margin-right: 10px;
  }
}
</style>
